<template>
  <view class="birthday-info-container">
    <e-navbar leftTitle="生辰信息"></e-navbar>
    <view class="birthday-info_title">请输入您的生辰信息</view>
    <view class="birthday-info_card">
      <view class="main-card cell-row p-t-24 p-b-24">
        <view class="flex col-center p-r-30">
          <view class="m-r-32">姓名</view>
          <view class="line"></view>
        </view>
        <u-input v-model="userinfo.nickname" placeholder="请输入姓名(汉字)" placeholderClass="placeholderClass" border="none"></u-input>
      </view>
      <view class="main-card cell-row">
        <view class="flex col-center p-r-30">
          <view class="m-r-32">性别</view>
          <view class="line"></view>
        </view>
        <view class="flex col-center">
          <view class="sex-tag" :class="[getSexClass(userinfo.gender,index)]" v-for="(item, index) in sexList" :key="index" @click="handleSelectSex(index)">
            <image :src="$image('/images/' + item.icon + '.png')" mode="aspectFill"></image>
            <view>{{item.title}}</view>
          </view>
        </view>
      </view>
      <view class="main-card cell-row p-t-24 p-b-24">
        <view class="flex col-center p-r-30">
          <view class="m-r-32">生日</view>
          <view class="line"></view>
        </view>
        <view class="placeholderClass birtday-row" @click="handleSelectBirthday()">
          <view>{{ formatBrithday || "请选择出生日期" }}</view>
          <image :src="$image('/images/arrow-right-circle.png')" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <u-gap height="44"></u-gap>
    <view class="font-24 text-999 text-center m-b-30">
      您的信息仅用于生成测算报告
    </view>
    <view class="main-btn m-30">
      <u-button text="确认" color="#1F66FF" @click="handleConfirmBtn"></u-button>
      <u-button text="返回首页" color="#FFFFFF" @click="handleBackHomeBtn"></u-button>
    </view>

    <!-- 日历弹出框 -->
    <u-popup :show="showCalendar" mode="bottom">
      <calendar
          :showMask="showCalendar"
          ref="yourname"
          @onChange="getChangeCalendar"
          @close="handleCloseCalendar"
          @sure="handleConfirmDay"
      ></calendar>
    </u-popup>
    <view class="agreement-row">
      <view class="check-icon flex-center" @click="handleCheckAgre()">
        <view class="">
          <image v-if="isCheckAgre" :src="$image('/images/agre-check.png')" mode="aspectFill"></image>
          <view v-else class="not-agre-check"></view>
        </view>
      </view>

      <text class="m-l-12">查看</text>
      <text class="blue-text" @click="handleToAgreement({type: 'privacy_policy', title: '用户协议'})">《用户协议》</text>
      <text>和</text>
      <text class="blue-text" @click="handleToAgreement({type: 'user_policy', title: '隐私协议'})">《隐私协议》</text>
    </view>
    <u-datetime-picker
        ref="datePicker"
        :show="dateShow"
        :minDate="minDate"
        :maxDate="maxDate"
        :closeOnClickOverlay="true"
        v-model="userinfo.birthday"
        mode="datetime"
        @close="handleCloseDatePicker"
        @cancel="handleCloseDatePicker"
        @confirm="handleConfirmDatePicker"
    ></u-datetime-picker>
    <!-- 支付方式弹窗 -->
    <e-pay-type-popup ref="payTypeRef" @choose="handleChoosePayType"></e-pay-type-popup>
    <!--  确认支付弹窗  -->
    <e-pay-popup ref="payPopupRef" @paySuccess="handlePayResult"></e-pay-popup>

  </view>
</template>

<script>
import {getCalendarDate} from "@/common/utils";

const {Solar, Lunar, HolidayUtil} = require('../common/lunar');
import calendar from '../components/calendar/calendar.vue'
export default {
  components: { calendar },
  data() {
    return {
      form: {
        name: '',
        sex: 0,
        birthday: '',
        dayType: 0,
      },
      sexList: [
        {
          title: '男',
          icon: "man-tag-active"
        },
        {
          title: '女',
          icon: "woman-tag"
        }
      ],
      sexIndex: 0,
      showCalendar: false,
      isCheckAgre: false, // 是否勾选协议
      dateShow: false,
      minDate: new Date(1950, 1, 1).getTime(),
      maxDate: new Date().getTime(),
      dataValue: "",
      formatBrithday: "", // 格式化出生日期
      userinfo: {},
      agent_type: 7, //6=流年运势, 7=详批八字
    };
  },
  onLoad(options) {
    if(options.agent_type){
      this.agent_type = options.agent_type;
    }
    let userinfo = uni.getStorageSync('userinfo') || "";
    if(userinfo){
      this.userinfo = JSON.parse(userinfo);
      if(this.userinfo.gender == "男"){
        this.sexIndex = 0;
        this.sexList[0].icon = "man-tag-active";
        this.sexList[1].icon = "woman-tag";
      }else{
        this.sexIndex = 1;
        this.sexList[0].icon = "man-tag";
        this.sexList[1].icon = "woman-tag-active";
      }
      this.getFormatBrithday(this.userinfo.birthday * 1);
    }
  },
  computed:{
    getSexClass(){
      return function (sex, index){
        if(sex == "男" && index == this.sexIndex){
          return 'man-active';
        }
        if(sex == "女" && index == this.sexIndex){
          console.log("sex, index",sex, index)
          return 'woman-active';
        }
      }
    }
  },
  methods: {
    handleCloseDatePicker(){
      this.dateShow = false;
    },
    async getFormatBrithday(birthday){
      let date = await getCalendarDate({
        date:this.$u.timeFormat(birthday, 'yyyy-mm-dd hh:MM:ss')
      });
      let year = date.solarDate.split(' ')[0];
      let shichen = date.lunarHour;
      this.formatBrithday = year + " " + shichen;
    },
    async handleConfirmDatePicker(event){
      this.userinfo.birthday = event.value;
      this.getFormatBrithday(this.userinfo.birthday * 1);
      this.dateShow = false;
    },
    handleSelectSex(index){
      if(this.sexIndex === index) return;
      this.sexIndex = index;
      this.userinfo.gender = index === 0 ? "男" : "女";
      if(this.sexIndex == 0){
        this.sexList[0].icon = "man-tag-active";
        this.sexList[1].icon = "woman-tag";
      }else{
        this.sexList[0].icon = "man-tag";
        this.sexList[1].icon = "woman-tag-active";
      }
    },
    handleConfirmBtn(){
      if(!this.isCheckAgre) return this.$u.toast('请勾选用户协议和隐私协议');
      this.$refs.payTypeRef.handleShowPayTypePopup({});


    },
    // 组件中选择支付方式
    handleChoosePayType(val){
      console.log("组件中选择支付方式", val);
      let data = {
        payType: val,
        payWay: "liunian"
      }

      this.$refs.payPopupRef.handleShowPayPopup({}, data);
    },
    // 支付结果
    handlePayResult(data){
      if(data && data.order_id){
        let url = "";
        let userData = {
          nickname: this.userinfo.nickname,
          gender: this.userinfo.gender,
          birthday: this.userinfo.birthday,
          agent_type: this.agent_type, //流年运势
        };
        let urlData = "?order_id=" + data.order_id + '&userData=' + encodeURIComponent(JSON.stringify(userData));
        if(this.agent_type == 6){
          url = "/pagesAugur/result/result" + urlData;
        }else{
          url = "/pagesAugur/report/report" + urlData;
        }
        uni.navigateTo({
          url
        })
      }
    },
    handleBackHomeBtn(){
      uni.switchTab({
        url: "/pages/index/index"
      })
    },
    // 点击显示日历弹窗
    handleSelectBirthday() {
      if(this.userinfo.birthday){
        this.$refs.datePicker.innerValue = (this.userinfo.birthday * 1) || this.maxDate;
      }
      this.dateShow = true;
      // this.showCalendar = !this.showCalendar;
      // let str = '';
      // str = this.form.dayType == 0 ? 'solar' : 'lunar'
      // this.$nextTick(()=>{
      //   console.log(this.$refs);
      //   this.$refs.yourname.switchBtn(str);
      // })
    },
    // 阳历农历切换回调 type solar=阳历 lunar=农历
    getChangeCalendar(type){
      this.form.dayType = type == 'solar' ? 0 : 1;
      console.log(type);
    },
    handleCloseCalendar(){
      this.showCalendar = !this.showCalendar;
    },
    // 点击确认日期
    handleConfirmDay(data){
      var lunar = Lunar.fromYmd(data.year * 1,data.month * 1,data.day * 1);
      var solar = lunar.getSolar();
      var subDay = `${solar.toString()} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      var birthday = `${solar.toString()} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      console.log(subDay,birthday);
      // if(this.form.dayType == 0){
      //   this.form.subDay = `${data.date} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      //   this.form.birthday = `${data.date} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      // }else{
      //   // 实例化
      //   var lunar = Lunar.fromYmd(data.year * 1,data.month * 1,data.day * 1);
      //   // console.log(lunar);
      //   // 转阳历
      //   var solar = lunar.getSolar();
      //   this.form.subDay = `${solar.toString()} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      //   this.form.birthday = `${solar.toString()} ${data.hour < 10 ? '0' + data.hour : data.hour}:${data.minute}:00`;
      // }
      // this.showCalendar = !this.showCalendar;
      // this.timeShow = !this.timeShow;
    },
    // 协议勾选
    handleCheckAgre(){
      this.isCheckAgre = !this.isCheckAgre;
    },
    handleToAgreement(data){
      uni.navigateTo({
        url: "/pages/mine/setting/agreement/agreement?type=" + data.type
      })
    }
  },
  options: {
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss" scoped>
  .birthday-info-container{
    .birthday-info_title{
      font-size: 48rpx;
      font-family: 'MicrosoftYaHei-Bold';
      font-weight: bold;
      text-align: center;
      padding: 76rpx;
      color: #000;
    }
    .cell-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14rpx;
      margin-bottom: 20rpx;
      /deep/ .placeholderClass{
        color: #999 !important;
        font-size: 28rpx !important;
      }
      .line{
        width: 1rpx;
        height: 26rpx;
        border-right: 1rpx solid #E4E4E4;
      }
      .man-active{
        background: #E3ECFF !important;
        color: #000 !important;
      }
      .woman-active{
        background: #FFEBF1 !important;
        color: #000 !important;
      }
      .sex-tag{
        font-size: 28rpx;
        color: #999;
        background: #F5F6FA;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        padding: 14rpx 30rpx;
        margin-left: 20rpx;
        image{
          width: 30rpx;
          height: 30rpx;
          display: block;
          margin-right: 20rpx;
        }
      }
      .birtday-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        image{
          width: 28rpx;
          height: 28rpx;
          display: block;
        }
      }
    }
    .main-btn{
      /deep/ .u-button:last-child{
        margin-top: 30rpx;
        color: #666666 !important;
      }
    }
    .agreement-row{
      position: fixed;
      bottom: 60rpx;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      .check-icon{
        width: 50rpx;
        height: 50rpx;
      }
      image{
        width: 30rpx;
        height: 30rpx;
        display: block;
      }
      .not-agre-check{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        border: 1rpx solid #999;
      }
      .blue-text{
        color: #1F66FF;
      }
    }
  }
</style>
